<template>
	<view class="reference" @tap="open">
		<uni-popup ref="tree_popup" type="center" :mask-click="false" :animation="true">
			<view class="tree_popup_view">
				<image @tap="closepups" class="closeicon" :src="photo_cdn+'zpupload/static/icon/closeicon.png'" mode=""></image>
				<view v-if="signal==1" class="operation">
					<view class="lable_cell_items">
						<view class="lable_names">爷爷姓名</view>
						<view class="lable_input_view">
							<input class="lable_input_tag" type="text" value="" v-model="grandpa_name"
								placeholder="请输入爷爷姓名"></input>
						</view>
					</view>
					<view class="lable_cell_items">
						<view class="lable_names">父亲姓名</view>
						<view class="lable_input_view">
							<input class="lable_input_tag" type="text" value="" v-model="parent_name"
								placeholder="请输入父亲姓名"></input>
						</view>
					</view>
					<view class="lable_cell_items">
						<view class="lable_names">您的姓名</view>
						<view class="lable_input_view">
							<input class="lable_input_tag" type="text" value="" v-model="name"
								placeholder="请输入您的姓名"></input>
						</view>
					</view>
					<view class="lable_cell_items">
						<view class="lable_names">激活码</view>
						<view class="lable_input_view">
							<input class="lable_input_tag" type="text" value="" v-model="card_number"
								placeholder="请输入激活码"></input>
						</view>
					</view>
					<view class="sub_footbtn" @tap="reference">
						<view class="sub_button">确认查询</view>
					</view>
				</view>
		
				<view v-if="signal==2" class="operation_a">
					<view v-if="claim_info.length" class="operation_title">请选择符合您情况的信息</view>
					<radio-group @change="radioChange">
						<view class="generation" v-for="(item,index) in claim_info" :key="index">	
							<view class="gener_box">
								<view class="call_name">爷爷：{{item.ft3_name}}</view>
								<view class="call_name">父亲：{{item.ft2_name}}</view>
								<view class="call_name">自己：{{item.name}}</view>
							</view>
							<radio :color="$themecolor" :value="item.name" :checked="index==current" />
						</view>
					</radio-group>
					<view v-if="claim_info.length==0" class="operation_title">暂未找到符合的信息，请重新填写</view>
					<view class="sub_footbtn">
						<view class="sub_button" @tap="afresh">重填</view>
						<view v-if="claim_info.length" class="sub_button" @tap="confirm">确认</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	import {claimFamilyPeople} from "@/utils/api/zupu.js";
	export default{
		props:{
			source_type:{//来源 3 默认  2 姓名卡
				type:[String,Number],
				default:"3",
			},
			//族谱id
			family_id:{
				type:[String,Number],
				default:"",
			},
			activation_code:{//激活码 自动输入的
				type:[String,Number],
				default:"",
			}
		},
		data(){
			return{
				photo_cdn,
				card_number:"",//激活卡的卡号
				people_id:'',
				current: 0, //单选框
				signal: 1, //弹窗显示  1是输入爷爷爸爸自己名字  2是选结果
				grandpa_name: '', //爷爷姓名
				parent_name: '', //父亲姓名
				name: '', //自己姓名
				claim_info: [],
			}
		},
		methods:{
			open(){
				if(this.activation_code){
					this.card_number = this.activation_code;//自动输入内容
				}
				
				this.$refs.tree_popup.open();
			},
			//关闭弹窗
			closepups(){
				this.$refs.tree_popup.close();
				setTimeout(()=>{
					this.signal=1;
					this.grandpa_name='';
					this.parent_name='';
					this.name='';	
				},500)	
			},
			//根据祖孙三代人的信息查询成员
			reference() {
				if(!this.grandpa_name){
					this.$api.msg('请输入爷爷姓名')
					return false;
				}
				if(!this.parent_name){
					this.$api.msg('请输入父亲姓名')
					return false;
				}
				if(!this.name){
					this.$api.msg('请输入您的姓名')
					return false;
				}
				
				let params = {
					grandpa_name: this.grandpa_name,
					parent_name: this.parent_name,
					name: this.name,
					
					type:this.source_type,//来源类型 
				}
				if(this.card_number){
					params.activation_code = this.card_number;//激活码
				}
				
				claimFamilyPeople({
					...params,
				}).then(res => {
					if (res.code == 1) {
						this.claim_info = res.data;
					}
					this.$api.msg(res.msg)
					setTimeout(() => {
						this.signal = 2
					}, 1000)
				})
			},
			radioChange(e) {
				for (let i = 0; i < this.claim_info.length; i++) {
					if (this.claim_info[i].name == e.detail.value) {
						this.current = i;
						break;
					}
				}	
			},
			//确认
			confirm(){
				this.people_id = this.claim_info[this.current].people_id
				console.log(this.people_id)
				
				let userinfo = uni.getStorageSync("userinfo");
				if(!userinfo.id){
					this.$api.msg("你还未登录!");
					return false;
				}
				
				let params = {
					people_id:this.people_id,
					fastim_id:userinfo.id,//id im
					
					type:this.source_type,//来源类型 
				}
				
				if(this.card_number){
					params.activation_code = this.card_number;//激活码
				}
				
				claimFamilyPeople({
					...params,
				}).then(res=>{
					if(res.code==1){
						
					}
					if(res.code==9999){
						this.$showModal({
							title:'提示',
							concent:`你还未缴费激活 是否激活?`,
							confirmVal:'确定',
							cancelVal:'取消',
						}).then(ress=>{
							uni.setStorageSync("jh_params",params)
							
							this.$refs.tree_popup.close();
							this.signal = 1;
							
							//族谱id
							this.family_id = this.claim_info[this.current].family_id;
							
							
							// source=-1
							uni.navigateTo({
								url:`/pages/zupu/join_pay/join_pay?number=${res.data.number}&family_tree_id=0&family_id=${this.family_id}&source=-1`
							})
						}).catch(err=>{
							console.log(err)
							
							this.$refs.tree_popup.close();
							this.signal = 1;
						})
					}else{
						this.$api.msg(res.msg);
						setTimeout(()=>{
							this.$refs.tree_popup.close();
							this.signal = 1;
						},1000)
					}
					
					
				})
			},
			//重填
			afresh(){
				setTimeout(()=>{
					this.signal = 1;
				},1000)
			}
		}
	}
</script>

<style lang="scss">
	@import "./reference.scss"
</style>